import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LockOutlined, UserOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, Card, Spin, message } from 'antd';

import { authMap } from '@/utils';
import { storage } from '@/utils/storage';
import { getAuthInfo, login } from '@/api/auth';

import './index.scss';
import { COLOR_THEME } from '@/config/theme';

function AdminLogin() {
    const [showPassword, setShowPassword] = useState(false);
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();

    const [isLoading, setIsLoading] = useState(false);
    const [initialFormValues] = useState(() => {
        const rememberMe = storage.getItem(storage.keys.REMEMBER_ME);
        return {
            remember: !!rememberMe,
            username: rememberMe?.username || '',
            password: rememberMe?.password || '',
        };
    });

    const onFinish = (values) => {
        setIsLoading(true);
        if (values?.remember) {
            storage.setItem(storage.keys.REMEMBER_ME, {
                username: values.username,
                password: values.password,
            });
        } else {
            storage.removeItem(storage.keys.REMEMBER_ME);
        }
        const params = {
            username: values?.username,
            password: values?.password,
        };
        login(params).then((res) => {
            console.log(res.data);
            setIsLoading(false);
            if (res?.code === 200) {
                storage.setItem(storage.keys.ACCESS_TOKEN, res.data.token);
                storage.setItem(storage.keys.USER_INFO, res.data.user);
                getAuthInfo().then((res) => {
                    if (res) {
                        storage.setItem(storage.keys.USER_AUTH, res.data.roles);
                    }
                });
                messageApi.open({
                    type: 'success',
                    content: '登录成功！',
                });
                setTimeout(() => {
                    navigate('/adminController');
                    window.location.reload();
                }, 1000);
            }
            if (res?.code === 401) {
                messageApi.open({
                    type: 'error',
                    content: '用户名或密码错误！',
                });
            }
        });
    };
    return (
        <div className="login">
            {contextHolder}
            <img
                src={require('@/assets/images/auth/adminLogin.png')}
                alt="管理员登录"
                className="login-banner"
                style={{ marginBottom: 24, width: '100%' }}
            />
            <Card
                className="login-card"
                style={{
                    backgroundColor: `${COLOR_THEME.QUATERNARY}50`,
                }}
            >
                <Form
                    name="login"
                    initialValues={initialFormValues}
                    style={{
                        maxWidth: 360,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的账号!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的密码!',
                            },
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined />}
                            placeholder="密码"
                            visibilityToggle={{
                                visible: showPassword,
                                onVisibleChange: setShowPassword,
                            }}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住 密码</Checkbox>
                            </Form.Item>
                            <a href={authMap.forgetPassword}>忘记密码</a>
                        </Flex>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit">
                            登 录
                        </Button>
                        {/* 或 <a href={authMap.register}>注 册!</a> */}
                    </Form.Item>
                </Form>
            </Card>
            <Spin spinning={isLoading} fullscreen />
        </div>
    );
}
export default AdminLogin;
